(7636) Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023) - YouTube

Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)

Code With Antonio

357K subscribers

661,890 views Feb 27, 2023

(CC) Blender Foundation | mango.blender.org (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org © copyright Blender Foundation | durian.blender.org © copyright Blender Foundation | www.sintel.org Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/proje... Are you looking to create a fullstack Netflix clone? Look no further! This video will show you how to use React, Tailwind CSS, Next.JS, Prisma, MongoDB, and NextAuth to create a powerful and scalable application. Plus, I'll show you how to deploy it on Vercel! Timestamps 00:00 Intro 02:05 Environment setup 08:47 Auth Screen UI 34:58 NextAuth, Prisma, Mongo Setup 01:20:39 Google and Github OAuth 01:33:40 Protecting routes, Profiles screen 02:00:22 Navbar Component 02:27:13 Billboard Component, Random Movie Endpoint 02:46:18 Movie List & Movie Card Components, Movies Endpoint, Cool hover effect 03:06:58 Favorites / My List functionality 03:29:19 Play Button, Video Player, Single Movie Endpoint 03:46:24 Info Modal Component 04:09:33 Vercel Deployment

Intro

Environment setup

Auth Screen UI

NextAuth, Prisma, Mongo Setup

Google and Github OAuth

Protecting routes, Profiles screen

Navbar Component

Billboard Component, Random Movie Endpoint

Transcript

Follow along using the transcript.

Code With Antonio

357K subscribers

The Complete Guide To Building A REST API With Node, Express, TypeScript & MongoDB + Authentication

by Code With Antonio

Show less

807 Comments

Add a comment...

@mikerobin8410

1 year ago

As a backend dev, frontend devs have my respect...

·

@microhum1956

7 months ago

I love the way you say "amazing, amazing job."

@illmatic08

1 year ago

For tailwind you don't have to write the bg opacity and bg color separately or any text color for that matter. e.g. bg-zinc-900/70 is same as bg-zinc-900 bg-opacity-70 or text-zinc-900/90 etc. Great video btw Antonio!

·

@thealejars

2 months ago

I just want to say thank you to Antonio for the awesome tutorial you made for the Netflix clone project. I was able to finish it and refactor it using the latest Next.js 14, which was an awesome experience. I managed to fix the build error with prisma generate and next build. I also added deactivate account

I successfully deployed it and am still polishing a lot of stuff like handling flickering, proper loading UI, etc. I didn't follow the exact UI because I had a problem accessing the repo (it was private), so I made my own. I'm sharing this big milestone with you guys. I'm excited to build my next project after this. Happy Coding :)

Read more

@shorts_faceless

1 year ago

Just a tip for future videos: VS code has a keybind that toggles automatic line-wrapping of your code so that you see everything in your editor regardless of window size (as opposed to having one really long line of code). Useful especially when working with tailwindcss so that you don't have to manually put all those class attributes in separate lines. For me, this keybind is ALT+Z (US keyboard layout).

·

@binfuwong8859

1 year ago

Thanks Antonio for the amazing and interesting tutorial! I like your straight-to-the-point method of coaching and thanks for showing many advanced and practical React techniques. Looking forward to learning more from you!

·

@youcube291

1 year ago

I've been looking for a tutorial like this for ages. Thank you!

·

@NicolasPena-ds5xt

1 year ago (edited)

What a great opportunity to practice and learn! It's a very well-explained project with excellent presentation. Thank you for sharing your knowledge!

·

@jordanbienvenue468

1 year ago

REALLY a great content for Fullstack learning, thanks for the effort you put in it. Appreciate

·

@jefferymuter4659

1 year ago

Using this to get a better understanding of nextjs/TS/Tailwind. I really love this stack so far. Although I do my best to stay away from tutorials, this one seemed so educational I couldn't help it, so I can take what we do here and start making some stuff using Next/TS on my own.

·

@zemiguel2550

1 year ago (edited)

By the way, you can add a JSON collection to a table instead of inserting every field of an element by itself. On the right of view, there's a {} symbol and you can simply click it, add the object underneath the id and you're good to go. Boom! Collection added. 2:29:30

·

@codewithantonio

1 year ago (edited)

Want to get mentored by me? Apply at https://www.codewithantonio.com/mentorship If you are having problems with "Favorite" functionality throwing "Not Signed In" error, It is because you have a newer version of Next & NextAuth, a small modification is needed (you can find it in the github repostory). Here are the steps: 1. Your [...nextauth].ts file should export authOptions separately 2. Your serverAuth.ts file should use getServerSession(req, res, authOptions) instead of getSession({req}) 3. Modify serverAuth(req) to serverAuth(req, res) everytwhere in your code. 4. Logout, shutdown the app, login again, everything should work

Read more

@sellimenes

1 year ago

Thank you for this great video, Antonio! I hope you will continue to share such videos.

️

·

@ze2411

1 year ago

THANK YOU FOR THIS BRO @CodeWithAntonio. No amount of CS degrees could have taught me this much.

·

@RichReflectionz

1 year ago

This is amazing, will be spending the weekend going through this. You got a new subscriber

·

@abdullahsiam7609

1 year ago

Your voice is clean. no extra distracting sound. keep up the good work bro. <3

·

@sagarmahbub964

1 year ago

This is a goldmine. Thanks a lot for bringing this up

·

@arielelias2413

1 year ago

We need more projects like this. Because is real, from real life, and a client could ask us something like this. Bravo! You have my support.

·

@alphashortss

1 year ago

that is so aesthetic, now we need one for ecommerce or maybe a booking functionality

·

@RifkiJones

1 year ago

Excellent tutorial, best I've seen on NextJS

·

@taunado

1 year ago

Thanks, really enjoyed your pace and that you didn't add unnessary distractions, such as music and live commenting. Looking forward to more, especially to learn more TS.

·

@AlexGerald-w9b

1 year ago

You're so awesome Antonio, great work here! Until now I thought it's just Javascript Mastery, now I know there's even better, you earned my sub

@learncode5110

1 year ago

Awesome! literally learned a lot from you bring more such real time web app projects

·

@tarkovarg

1 year ago

Hey Antonio! thanks for your experience. Im from Argentina and this video is really helping me, hope to learn more from you. Keep up

·

1 year ago

Brilliant, exactly what I was looking for ! Thanks

·

@davronmaxmudov3972

1 year ago

Amazing video, good luck bro

·

@devZone7

10 months ago

Thank you so much Antonio, I'm a beginer in React but when see your videos it makes me feeling motivated again !

@mohdazkar8315

1 year ago

I appreciate your hard work , such a great project

·

@shayanmahnam

1 year ago

Best tutorial I have ever seen on youtube!!!! Well Doneee

·

@matheusescobozo3478

9 months ago

This first section of the video where you teach the Auth Screen UI was so good for me to train useState concepts ! Looking foward to finish this project. Greetings from Brazil, mate!

@DiamondSaberYT

1 year ago

Looks pretty impressive. I haven’t really been using that newest tech as much, so this will be a fun project to make to learn newest frontend I guess!

·

@codewithantonio

1 year ago (edited)

Some of you have requested a Patreon, so I made one: https://www.patreon.com/CodeWithAntonio Since this is a very long tutorial with lots of moving parts, I created a Discord channel where you can join and discuss any errors, problems or bugs you find. I will be more than happy to help you here: https://discord.gg/SPEBvAz4Vd

@youcube291

1 year ago

This video was so informative! Thanks for sharing your knowledge

·

@zeeshan4341

1 year ago

excellent stuff. keep it up man

hoping for more stuff like this.

·

@achillesoliveira8882

5 months ago

Thank you very much, your videos have helped me a lot, this was the best tutorial I've ever watched.

@akmalsulaymonov2414

1 year ago (edited)

Antonio, thanks for amazing course.

@luunger

1 year ago

I loved the project, even though I'm Brazilian and I don't know much English, I ended up learning a lot of useful things

·

@tflixtuto64

1 year ago

stumbled on your channel today and wow am impressed You very good Antonio

·

@prasad_yt

1 year ago (edited)

Well done ! I have a question - I noticed that you have used the useCallback( ) hook in multiple places. What is the reason for that ? For instance, what is the reason for using the hook in the login and register functions ?

@praveen_sinnur

1 year ago (edited)

We are with you

@HuyNguyen-bh8tq

1 year ago

This wonderful tutorial is help me improve my skills. Thank you!

·

@dalestewart

1 year ago

Another top notch professional application.

·

@trburaktr16

1 year ago

Now that it's back, it's time for Udemy Clone

@comaecod

1 year ago (edited)

I just finished building this project, and it feels like such a relief! There were so many new things for me to learn, particularly using TailwindCSS and Prisma. I faced some initial bugs, but I slowly got the hang of the project and ended up loving it. However, I have noticed a few small things that could be improved. For instance, when we mark a movie as a favorite, it takes about 4-5 seconds to appear in the favorites section. I'm not entirely sure why this is happening, but it could be because they are rendered on the server-side, causing a delay in updating the page. Perhaps we could use a feature that React provides to update the front-end instantaneously and asynchronously update the back-end? The same issue applies to the modal, the content takes a while to load. Also, when a user logs in using a Google account, let's say, he can't login via his Github account or vice versa. Is there a way to allow this kinda login and associate it to the same person by checking it against his email_id? Overall, I enjoyed working on this Next 13 Project and feel like I learned a lot about current development practices. Thank you, Antonio, for providing such a great tutorial, and I look forward to catching up on more of your content in the future!

Show less

@nicowiranata7711

1 year ago

its awesome man,just finished the whole thing, its my first time trying typescript and also nextJs, learn a lot from this althoug im not really sure i understand them all

·

@s8x.

1 year ago

Thank you for this tutorial. I hope to learn from this

·

@kodekorp2064

1 year ago

Ngl surprised to see Prisma not die off. At one point it was questionable if they were still going to be around.

@octavieploye

1 year ago

Thanks a lot for your great work! it's been really worth to follow your tutorial ! Keep Well

·

@nubian_goat

1 year ago

Wow this is legit. thanks man. love your videos.

·

@fern_lpz

1 year ago (edited)

Muy valioso aporte, saludos desde Argentina, sos crack!

Translate to English

·

@gray5881

1 year ago

Awesome

stuff man, hope to see more from you

·

@zsoltdemeter9300

1 year ago

Great video and great content! Really helps me out. Keep up the good work! Can't wait to check your other projects also. Cheers!

·

@mohamedyoussef8835

1 year ago

Thanks Antonio for the amazing tutorial

·

@srandlee4014

1 year ago

That's absolutely what I'm looking for! I have tried several times to find a tutorial like this to build Netflix, but failed. Thanks a lot for your effort and sharing! face-blue-heart-eyes

·

@jufri17

1 year ago

really love it

it could be better if you can explain the tailwind classes. and type the classes after the jsx. so we can see the classes affect.

·

@kimbapslayer1995

1 year ago (edited)

Genuinely curious. Why do people choose next auth when firebase is like done in 3 steps all on one place? It’s a copy paste confit, import auth, create an auth function and done? I’d really like to know the advantages of next auth!

·

@najafsikander8760

1 year ago

I just completed the tutorial. Amazing work. Keep up the good work bro

@ChouaibNemri

11 months ago

Good job Antonio, for those interested, I am rewriting this whole app using the brand new NextJS App router. I'll be sharing the code soon!

@naylord5

1 year ago

Sweet baby Jesus, you don't have an idea of how convenient this is for a personal project. Thank you very much!

Please consider for a next video a multi file uploads DnD CRUD and/or RBAC (like for custom what menus or modules a user can see or actions than can do). Thanks in advance!

·

@ranaatito9328

1 year ago

thanks for the tutorial and amazing tools u used

·

@alexandershubert573

1 year ago

Absolutely amazing! Thank you so much

·

@unfalldead

1 year ago

thank you for this tutorial ! Instant follow

·

@godloveinaction

1 year ago

I was the 1000th subscriber, gud content bruh

·

@mfion1

1 year ago

one new subscriber earned,lovely content

·

@DmitriyVolontyr-m2e

1 year ago

Sorry for the question Antonio, but what about log in with git and google after deploy, maybe u can film a mini video for us ? <3 hand-pink-waving

@radtn

1 year ago

Very impressive! can you tell me please what theme and font ligatures you rockin Antonio ? (The animation cursor when you don't type is so cool!)

·

@luunger

1 year ago

In the MovieCard component, the property (group-hover:-translate-x-[2vw]) works normally on medium screens. But in ultrawide the first card always leaves the screen, I solved it by passing (group-hover:-translate-x-[1vw])

·

@jagansaravanan4601

1 year ago

Excellent stuff !!! Thank you

·

@GoogleUser-nx3wp

1 year ago

Thank you man whenever i start earning I'll make sure to donate to you

@Clawker

10 months ago

Hey Antonio i am on 1:33:40 can you please tell that when i am logging in with my google or github account it is not showing any id in in mongodb users.

@Deus-lo-Vuilt

1 year ago

Thanks Antonio

@coderprakash

1 year ago

Hi i am very happy for seeing ur video back but quality is missing?

@munawirulhadi2864

1 year ago

nice thanks, i will follow your video once i have free time

·

@razibulhossen9680

1 year ago

Thanks for this amazing video

·

@sukritsaha5632

1 year ago

This is probably a very small suggestion, but in Tailwind, you can write p-16 instead of px-16 and py-16. Will save few seconds I guess

.

·

@prodigymuj

1 year ago

My first time fully following a long video like this and really happy with the result! Thank you! I did want to mention that the SSO buttons don't work on production and my guess is the OAuth settings in Google and Github that need updating? So from localhost:3000 to the actual url?

·

@_yllw6155

1 year ago

it's literally refreshing now to see a code video without "ChatGPT" in the title

·

@jeanweb93

1 year ago

Almost done, TY !

·

@maverick_rdx2236

1 year ago

We want more such advanced level videos on projects antonio

@Anthony-wg7fn

1 year ago (edited)

awesome video man. are you using any kind of vscode extensions for typescript and tailwind?

·

Intro

Environment setup

Auth Screen UI

NextAuth, Prisma, Mongo Setup

Google and Github OAuth

Protecting routes, Profiles screen

Navbar Component

Billboard Component, Random Movie Endpoint

Movie List & Movie Card Components, Movies Endpoint, Cool hover effect

Favorites / My List functionality

Play Button, Video Player, Single Movie Endpoint

Info Modal Component

Vercel Deployment

Adrian Jade Manaday

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can’t create clip while ad is playing

Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)

15KLikes

661,890Views

2023Feb 27

(CC) Blender Foundation | mango.blender.org (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org © copyright Blender Foundation | durian.blender.org © copyright Blender Foundation | www.sintel.org Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/proje... Are you looking to create a fullstack Netflix clone? Look no further! This video will show you how to use React, Tailwind CSS, Next.JS, Prisma, MongoDB, and NextAuth to create a powerful and scalable application. Plus, I'll show you how to deploy it on Vercel! Timestamps 00:00 Intro 02:05 Environment setup 08:47 Auth Screen UI 34:58 NextAuth, Prisma, Mongo Setup 01:20:39 Google and Github OAuth 01:33:40 Protecting routes, Profiles screen 02:00:22 Navbar Component 02:27:13 Billboard Component, Random Movie Endpoint 02:46:18 Movie List & Movie Card Components, Movies Endpoint, Cool hover effect 03:06:58 Favorites / My List functionality 03:29:19 Play Button, Video Player, Single Movie Endpoint 03:46:24 Info Modal Component 04:09:33 Vercel Deployment

Intro

Environment setup

Auth Screen UI

NextAuth, Prisma, Mongo Setup

Transcript

Follow along using the transcript.

Code With Antonio

357K subscribers

The Complete Guide To Building A REST API With Node, Express, TypeScript & MongoDB + Authentication

by Code With Antonio

Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)

Code With Antonio

Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)

Code With Antonio

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Code With Antonio

Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)

Code With Antonio

Full Stack Spotify Clone: Next 13.4, React, Stripe, Supabase, PostgreSQL, Tailwind (2023)

Code With Antonio

Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL, 2023

Code With Antonio

Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023

Code With Antonio

Build a SaaS: AI Companion With Next 13, React, Stripe, Prisma, MySQL, Tailwind | Tutorial 2023

Code With Antonio

Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

Code With Antonio

Build a Course & LMS Platform: Next 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Udemy Clone

Code With Antonio

Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023

Code With Antonio

Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)

Code With Antonio

Next Auth V5 - Advanced Guide (2024)

Code With Antonio

Fullstack Trello Clone: Next.js 14, Server Actions, React, Prisma, Stripe, Tailwind, MySQL

Code With Antonio